<template>
  <div id="Integral">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="scrollerBottom" >
      <div id="banner">
        <div class="swiper-container">
          <!-- <div class="swiper-wrapper">
            <div class="swiper-slide"style=""v-for="(item,index) in 5">
              <img src="../../assets/1.jpg" alt="" width="100%" height="100%">
            </div>
          </div> -->
          <div class="swiper-slide">
              <!-- Using the slider component -->
              <slider ref="slider" :options="options">
                  <!-- slideritem wrapped package with the components you need -->
                  <slideritem v-for="(item,index) in bannerImg" :key="index">
                      <img :src="url + item.img"/>   
                  </slideritem>
                  <!-- Customizable loading -->
                  <div slot="loading">loading...</div>
              </slider>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="common-form">
        <div class="index-notice">
          <a @click="switchTo('/gonggao')">
            <span class="index-notice-tel"><i></i>公告</span> 
            <em>惠万众即将上线，全球名牌不止三折 </em>
            <img src="../../assets/dian.png">
          </a>
        </div>
      </div>
      <div class="ad">
          <div class="left ad_left"  @click="switchTo('/Spike')">
              <img src="../../assets/index1.png" alt="">
              <span>限量秒杀</span>
              <p>海量正品限量购</p>
          </div>
          <div class="right ad_right">
              <div class="ad_right1" @click="boun">
                  <img src="../../assets/index2.png" alt="">
                  <span>砍价<em>0元</em>得</span>
                  <p>邀亲朋0元得好物</p>
              </div>
              <div class="ad_right2" @click="assemble">
                  <img src="../../assets/index3.png" alt="">
                  <span>拼团</span>
                  <p>物超所值，各种拼</p>
              </div>
          </div>
          
      </div>
      <!-- <div class="common-form">
        <div class="home-list" @click="boun"><img src="../../assets/home1.png" alt=""><p>秒杀</p></div>
        <div class="home-list" @click="boun"><img src="../../assets/home2.png" alt=""><p>拼团</p></div>
        <div class="home-list" @click="boun"><img src="../../assets/home3.png" alt=""><p>砍价</p></div>
        <div class="home-list"><img src="../../assets/home4.png" alt=""><p>红包</p></div>
      </div> -->
      <div class="common-tel">
          推荐好物
          <div class="common-tel-dot">
              <em></em>
              <em></em>
              <em></em>
          </div>
      </div>
      <!-- <input type="checkbox" name="" id=""> -->
      <div class="team-spell" >
          <a  class="team-spell-goods" v-for="(item,index) in recList" >
              <router-link  :to="{path:'/VipDetail/'+ item.id}">
                  <img :src="url + item.thumbnail"/>
                  <div class="shop-goods-info">
                      <p>{{item.goods_title}}</p>
                      <p>价格：￥{{item.market_price}}</p>
                      <p>会员价：<em>￥<i>{{item.price}}</i></em></p>
                  </div>
              </router-link>
          </a>
      </div>
      <div class="common-tel">
        会员专享
        <div class="common-tel-dot">
          <em></em>
          <em></em>
          <em></em>
        </div>
      </div>

      <div class="shop">
          
        <div class="shop-goods" v-for="(item,index) in DataList" :key="index">
            <router-link  :to="{path:'/home/VipDetail/'+ item.id}">
                <img :src="url + item.thumbnail" />
                <div class="shop-goods-info">
                    <p>{{item.goods_title}}</p>
                    <p>价格：￥{{item.market_price}}</p>
                    <p>会员价：<em>￥<i>{{item.price}}</i> </em></p>
                </div>
            </router-link>
        </div>
        <div class="clearfix"></div>
          
      </div>
      
      <div style="width: 100%;height:40px;"></div>
    </scroller>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

<script>
  import qs from 'qs'
  import url from 'url'
  import axios from 'axios'
  import Footer from '../Footer/Footer'
  import { slider, slideritem } from 'vue-concise-slider'
  export default {
    data(){
      return{
        DataList:[],
        company:'1',
        order:'1',
        total:'1',
        // page:'3',
        sign:'D26DAFE22E6CB33F8C22B9D632B0F121',
        url:'http://api.huiwanzhong365.com',
        goods_id:'',
        data:{},
        apiUrl:'goods/getList',
        openid:'',
        imgTitl:'http://tstatics.76sd.com',
        //Slider configuration [obj]
        options: {
            currentPage: 0,
            autoplay:3000,
            loop:true
        },
        bannerImg:[],
        recList:[],
        page:1,
      }
    },
    components: {
      slider,slideritem,Footer
    },
    beforeRouteLeave: function (to, from, next) {
        if (to.name == 'detail') {
        }
        next()
        console.log('[beforeRouteLeave]', to, from, next)
        return true
    },
    methods:{
        switchTo(path){
            // console.log(this.$router)
            this.$router.push(path)
        },
        //下拉刷新
        refresh:function(done){
            console.log('refresh')
            this.DataList.length = 0
            this.page = 1
            this.$refs.scrollerBottom.finishInfinite(false)
            this.getDataList(this.page, done);
        },
        //上拉加载
        infinite(done){
            console.log('infinite')
            this.getDataList(this.page, done);
        },
        //会员商品列表
        getDataList(page,done){
            var that = this
            var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
            // console.log(this.categoryTd)
            var draw = { 
                openid:openid,
                goods_type:0, 
                page:page,
                // category_id:this.categoryTd
            }
            that.$http.post('/index/merchant/goods/list',qs.stringify(draw)).then(res=>{
                console.log(res.data.data)
                // that.DataList = res.data.data
                if(res.data.data.length == 0) {
                    that.$refs.scrollerBottom.finishInfinite(true)
                    return false
                }
                that.DataList.push(...res.data.data);
                that.page++
                done()
            }).catch(err=>{
                console.log(err)
                done()
            })
        },

      //轮播
      banner:function(){
        // /index/banner
        var that = this
        var openid = localStorage.getItem("openid")
        var draw = { 
            openid:openid,
        }
        that.$http.post('/index/banner',qs.stringify(draw)).then(res=>{
            console.log(res.data)
            this.bannerImg = res.data
        }).catch(err=>{
            console.log(err)
        })
      },
      boun:function(){
        layer.open({
          content: '该功能暂未开放'
          ,btn: '我知道了'
        });
        // this.$router.push({name:'assemble'});
      },
      assemble(){
        this.$router.push({name:'assemble'});
      },
      // 推荐
      tuijian:function(){
        
        var that = this
        var openid = localStorage.getItem("openid")
        var draw = { 
            openid:openid,
        }
        that.$http.post('/index/merchant/goods/randGoodsList',qs.stringify(draw)).then(res=>{
            console.log(res.data)
            this.recList = res.data
        }).catch(err=>{
            console.log(err)
        })
      },
      
    },
    // created(){
    //   var that = this
    //   var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
    //   var draw = { 
    //       openid:openid,
    //       goods_type:0
    //       // level:0
    //   }
    //   that.$http.post('/index/merchant/goods/list',qs.stringify(draw)).then(res=>{
    //       console.log(res.data)
    //       this.DataList = res.data.data;
    //   }).catch(err=>{
    //       console.log(err)
    //   })

    // },
    mounted(){
      this.banner()
      this.tuijian()
      // this.getDataList()
    }
  }
</script>

<style scoped>
#Integral{
    height:100%;
}
.shop{
    height:100%;
}
.clearfix{
    clear: both;
}
._v-container{
    position: relative !important;
}

.left{
    float: left;
}
.right{
    float: right;
}
.ad{
    width:94%;
    margin-left:3%;
    display: inline-block;
    margin-top:5%;
}
.ad_left img{
    border-radius: 10px;  
}
.swiper-slide{
    width: 94%;
    display: inline-block;
    margin-left: 3%;
    border-radius: 5px;
    overflow: hidden;
    height: 190px;
    margin-top: 15px;
}
.ad_right2{
    margin-top:5%;
}
.ad_left,.ad_right{
  width:48.5%;
}
.ad_left,.ad_right1,.ad_right2{
  position: relative;
}
.ad_left img,.ad_right1 img,.ad_right2 img{
  width:100%;
}
.ad_right1 span em{
  color:#FC2847;
  font-size:20px;
  font-weight: 600;
}
.ad_left span{
  position:absolute;
  top:10%;
  left: 8%;
  font-size:20px;
  font-weight: 600;
}
.ad_right1 span,.ad_right2 span{
  position:absolute;
  top:20%;
  left: 8%;
  font-size:20px;
  font-weight: 600;
}
.ad_left p{
  position:absolute;
  top:25%;
  left: 8%;
  color:#999
}
.ad_right1 p,.ad_right2 p{
  position:absolute;
  top:50%;
  left: 8%;
  color:#999
}
.home-list{
  width:25%;
  float: left;
  text-align: center;
  padding:15px 0;
}
.home-list img{
  width: 44px;
  height:44px;
  margin-bottom: 5px;
}
.home-list p{
  font-size:13px;
}
.home-list:nth-child(1) p{
  color:#FF688A ;
}
.home-list:nth-child(2) p{
  color:#7954D3;
}
.home-list:nth-child(3) p{
  color:#5B78CE;
}
.home-list:nth-child(4) p{
  color:#FFB065;
}
/* 公告 */
.index-notice{
    width:94%;
    display: inline-block;
    margin:8px;
    line-height: 24px;
}
.index-notice a{
    color:#999;
    font-size:12px;
    margin-top: 3px;
    display: list-item;
}
.index-notice-tel i{
    display: block;
    height: 21px;
    width: 20px;
    overflow: hidden;
    background: url(../../assets/ding.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    vertical-align: middle;
    margin-top: 2px;
    float: left;
}
.index-notice-tel{
    color:#FC2847;
    font-weight: 600;
}
.index-notice img{
    width: 20px;
    float: right;
    margin-top: 3px;
}


.team-spell{
	width:94%;
	margin:0 auto;
}
.team-spell-goods img{
	width:100%;
	height:112px;
}
.team-spell-goods{
	width: 32%;
	background: #FFF;
	float: left;
	border-radius: 5px;
	overflow: hidden;
	margin-top:10px;
    padding-bottom: 5px;
}
.team-spell a:nth-child(2){
    margin: 10px 2% 0;
}
.team-spell-goods p:nth-child(2){
	width:88%;
	margin:0 auto;
	font-size:12px;
	padding:2px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 4px;
}
.team-spell-goods p:nth-child(3){
    font-size: 12px;
    color: #FE2746;
    width: 88%;
    margin: 0 auto;
}
.team-spell-goods p:nth-child(3) em {
	font-weight: 600;
	color:#FE2746;
}
.team-spell-goods p:nth-child(4){
	font-size:12px;
	width:94%;
	margin:5px auto;
	color:#999;
}
.team-spell-goods p:nth-child(4) em{
	font-size:12px;
	background-color: rgba(252, 40, 71, 0.07);
	color:#FC2847;
	float: right;
	padding:2px 5px;
	border-radius: 20px;
    margin-top: -3px;
}
</style>
